<template>
  <div class="picker">

    <wxc-popup ref="pop" :popupColor="backgroundColor" :show="show" @wxcPopupOverlayClicked="PopupOverlayClick"
      pos="bottom" width="750" height="950">

      <div class="picker-wrapper">
        <div class="picker-nav">
          <text class="picker-title all font32">{{T('选择到期日期')}}</text>
          <LImage class="picker-close" :src="Config.img('ic_ai_close.png')" @click="cancel">
          </LImage>
        </div>
        <div class="picker-sel">
          <SingleSelView :menus="menus" :menu="menu" @menuClick="menuClick" />
        </div>
        <div class="picker-tab">

          <div :class="['picker-tab-item', isShowDate ? 'picker-tab-item-sel' : 'picker-tab-item-nor']"
            style="margin-right: 15px" @click="isShowDate = true">
            <text :class="['all','font32',isShowDate?'picker-tab-text-sel':'picker-tab-text-nor']">{{ nDate }}</text>
          </div>

          <div :class="['picker-tab-item', !isShowDate ? 'picker-tab-item-sel' : 'picker-tab-item-nor']"
            style="margin-left: 15px" @click="isShowDate = false">
            <text :class="['all','font32',!isShowDate?'picker-tab-text-sel':'picker-tab-text-nor']">{{ nTime }}</text>
          </div>

        </div>

        <date-view v-if="isShowDate" ref="date" class="picker-content" @onChangeDate="onChangeDate"
          :curDate="nDateTime || curDate" />

        <time-view v-else ref="time" class="picker-content" @onChangeTime="onChangeTime"
          :curDate="nDateTime || curDate" />

      </div>

      <div class="picker-btn">
        <text class="cancel-btn" @click="cancel">{{T('取消')}}</text>
        <text class="commit-btn" @click="change">{{T('保存')}}</text>
      </div>

    </wxc-popup>

  </div>
</template>

<script>
  import dateUtils from "./dateutils";
  import WxcPopup from "../pop/wxc-popup";
  import DateView from "./date.vue";
  import TimeView from "./time.vue";
  import SingleSelView from "./singlesel.vue";
  import Config from "@/_js/config";
  const dom = weex.requireModule("dom");
  import jdebug from "@/_js/debug";
  import I18N from "@/_i18n/i18n";
  var T = I18N.t;

  export default {
    name: "x-picker",
    components: { WxcPopup, DateView, TimeView, SingleSelView },
    data: () => ({
      T: T,
      Config: Config,
      menu: -1,
      menus: [
        T("${1}天后").replace("${1}", 1),
        T("${1}天后").replace("${1}", 7),
        T("${1}天后").replace("${1}", 30),
        T("${1}天后").replace("${1}", 90),
      ],
      isShowDate: true,
      skipWatch: false,
      nDateTime: null,
      nDate: "",
      nTime: "",
    }),
    props: {
      // 是否显示 picker
      show: {
        type: Boolean,
        default: false,
      },
      // 背景色
      backgroundColor: {
        type: String,
        default: "#0C0C0C",
      },
      curDate: {
        type: String,
        default: "2025-01-01 00:00:00",
      },
    },
    created() {},
    mounted() {
      this.nDateTime = this.curDate;
      jdebug.log("mounted====", this.curDate);
      this.updateCurDateTime(this.nDateTime);
    },

    methods: {
      //菜单点击
      menuClick(index) {
        this.menu = index;
        // 获取当前日期
        const now = new Date();
        // now.setHours(0, 0, 0, 0); // 将当前时间设置为当天的 00:00:00
        let daysToAdd = 0;
        // 根据菜单索引设置天数
        switch (index) {
          case 0:
            daysToAdd = 1; // 1 天后
            break;
          case 1:
            daysToAdd = 7; // 7 天后
            break;
          case 2:
            daysToAdd = 30; // 30 天后
            break;
          case 3:
            daysToAdd = 90; // 90 天后
            break;
          default:
            break;
        }

        const targetDate = now;
        targetDate.setDate(now.getDate() + daysToAdd);
        // 格式化目标日期为 "YYYY-MM-DD HH:mm:ss"
        const year = targetDate.getFullYear();
        const month = (targetDate.getMonth() + 1).toString().padStart(2, "0");
        const day = targetDate.getDate().toString().padStart(2, "0");
        const hours = targetDate.getHours().toString().padStart(2, "0");
        const minutes = targetDate.getMinutes().toString().padStart(2, "0");
        const seconds = targetDate.getSeconds().toString().padStart(2, "0");

        // 暂时禁用 watch
        this.skipWatch = true;
        this.nDateTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;

        // 更新 DateView 的当前日期
        if (this.$refs.date) {
          this.$refs.date.updateCurDate(this.nDateTime);
        }
        if (this.$refs.time) {
          this.$refs.time.updateCurTime(this.nDateTime);
        }
      },
      onChangeDate(date) {
        this.nDateTime =
          date.year + "-" + date.month + "-" + date.day + " " + this.nTime;
      },
      onChangeTime(time) {
        this.nDateTime =
          this.nDate + " " + time.hours + ":" + time.minutes + ":" + time.seconds;
        jdebug.log("onChangeTime", this.nDateTime);
      },

      updateCurDateTime(date) {
        if (!date) {
          return;
        }
        const targetDate = dateUtils.createDate(date);
        const year = targetDate.getFullYear();
        const month = (targetDate.getMonth() + 1).toString().padStart(2, "0");
        const day = targetDate.getDate().toString().padStart(2, "0");
        const hours = targetDate.getHours().toString().padStart(2, "0");
        const minutes = targetDate.getMinutes().toString().padStart(2, "0");
        const seconds = targetDate.getSeconds().toString().padStart(2, "0");

        this.nDate = `${year}-${month}-${day}`;
        this.nTime = `${hours}:${minutes}:${seconds}`;

        if (this.skipWatch) {
          this.skipWatch = false;
          return;
        }
        // if (this.isNDaysLater(date, 1)) {
        //   this.menu = 0;
        // } else if (this.isNDaysLater(date, 7)) {
        //   this.menu = 1;
        // } else if (this.isNDaysLater(date, 30)) {
        //   this.menu = 2;
        // } else if (this.isNDaysLater(date, 90)) {
        //   this.menu = 3;
        // } else {
        //   this.menu = -1;
        // }
      },

      // 当点击确定时
      change(e) {
        this.$refs.picker_end = true;

        this.$emit("timePickerResult", this.nDateTime || this.curDate);
        this.cancel(e);
      },
      cancel(e) {
        this.$refs.picker_end = true;
        this.PopupOverlayClick(e);
      },
      PopupOverlayClick(e) {
        this.$refs.pop.hide();
        this.$emit("overlayClick", e);
      },
    },
    watch: {
      nDateTime(crt) {
        if (crt) {
          this.updateCurDateTime(crt);
        }
      },
    },
  };
</script>

<style scoped>
  .picker {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 750px;
    flex: 1;
  }
  .picker-wrapper {
    width: 750px;
    height: 780px;
  }
  .picker-nav {
    width: 750px;
    height: 100px;
    position: relative;
    background-color: #1677fe;
  }
  .picker-close {
    width: 35px;
    height: 35px;
    right: 30px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  .picker-title {
    color: #ffffff;
    text-align: center;
    height: 112px;
    font-size: 32px;
    line-height: 100px;
  }
  .picker-sel {
    margin-top: -12px;
    width: 750px;
    height: 100px;
    border-radius: 16px;
    z-index: 99;
    background-color: #0c0c0c;
  }
  .picker-tab {
    width: 750px;
    height: 100px;
    padding-left: 20px;
    padding-right: 20px;
    flex-direction: row;
    align-items: center;
  }
  .picker-tab-item {
    height: 80px;
    flex: 1;
    background-color: #151a2a;
    border-radius: 4px;
    border-width: 2px;
  }
  .picker-tab-item-sel {
    border-color: #1677fe;
  }
  .picker-tab-item-nor {
    border-color: #252a4d;
  }
  .picker-tab-text-sel {
    text-align: center;
    color: #1677fe;
    line-height: 80px;
    font-size: 32px;
  }
  .picker-tab-text-nor {
    text-align: center;
    color: #777f9b;
    line-height: 80px;
    font-size: 32px;
  }
  .picker-content {
    width: 750px;
    height: 480px;
    flex-direction: row;
  }

  .picker-btn {
    width: 750px;
    height: 100px;
    margin-bottom: 40px;
    flex-direction: row;
    justify-content: center;
  }

  .cancel-btn {
    color: #e0e7fd;
    background-color: #2f364b;
    font-size: 32px;
    width: 200px;
    height: 80px;
    margin-right: 14px;
    text-align: center;
    line-height: 80px;
    border-radius: 12px;
  }
  .commit-btn {
    color: #e0e7fd;
    font-size: 32px;
    background-color: #1677fe;
    width: 200px;
    margin-left: 14px;
    text-align: center;
    height: 80px;
    line-height: 80px;
    border-radius: 12px;
  }
</style>
